import React, { PureComponent } from 'react';
import { Editor } from '@tinymce/tinymce-react';
import { ENROLL_UPLOAD_RICHTEXT_PICTURE } from 'constants/server-apis';

import { POSTUploadAuthedRequest } from 'utils/net-requests';

import styles from './index.css';

/**
 * 富文本编辑器:tinymce
 */
class Index extends PureComponent {

  constructor(props) {
    super(props);
  }

  render() {
    const { jwt } = this.props;

    return (
      <Editor
        initialValue=""
        value={this.props.value}
        init={{
          height: 550,    // 编辑器高度
          inline: false,
          language: 'zh_CN',    // 编辑器语言
          menubar: false,   // 菜单栏设置
          fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
          plugins: [    // 插件设置
            'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table paste code help wordcount'
          ],
          toolbar:    // 工具栏设置(工具栏的设置依赖于插件设置)
            'code preview | image | undo redo | formatselect | bold italic backcolor | \
            alignleft aligncenter alignright alignjustify | \
            bullist numlist outdent indent | removeformat | help',
          automatic_uploads: true, // 配置是否自动上传
          file_picker_types: 'image', // 指定上传的文件类型
          images_file_types: 'jpg,jpeg,png', // 配置图片类型
          images_upload_handler: (blobInfo, success, failure, progress) => {
            // 要发送的图片文件
            let formData = new FormData()
            formData.append('file',blobInfo.blob());
            // 发起请求
            const uploadResult = POSTUploadAuthedRequest(jwt, ENROLL_UPLOAD_RICHTEXT_PICTURE, blobInfo.blob());
            // 成功后调用success方法显示图片信息
            uploadResult.then((res)=>{
              const { fileUrl } = res.data;
              success(fileUrl);
            })
          }

        }}
        onEditorChange={this.editorChangedHandler}
      />
    );
  }

  editorChangedHandler = (content, editor) => {
    const { onChangeContent, onChangeAnalysis } = this.props;
    !!onChangeContent && onChangeContent(content);
    // !!onChangeAnalysis && onChangeAnalysis(content);
  }

  componentDidMount() {}

}

export default Index;